<template>
	<view class="content">
		<div class="pos-rel" v-if="loading">
			<!-- 内容 -->
			<div class="main-box">
				<image class="avator-bg" mode="aspectFill" :src="baseUrl + tutorDetail.carouselImageUrls" />
				<div class="tutor-detail">
					<div class="text-center fontS48 font-500">{{ tutorDetail.tutorName }}</div>
					<div class="text-center mt-6 lh-50 fontS22 pb-22 bor-b">
						已服务<span class="color-green">{{ tutorDetail.servePeople ? tutorDetail.servePeople : 0 }}</span>人
					</div>
					<div class="text-center mt-30 font-weight">{{ tutorDetail.parentLabelName }}/{{
						tutorDetail.labelName }}</div>
					<div class="mt-30 text-detail">{{ tutorDetail.tutorIntroduction }}</div>
				</div>
			</div>
			<div class="bottom">
				<div>
					服务费 <span class="color-red ml-10">¥</span><span class="color-red fontS40 font-weights">{{
						tutorDetail.price }}</span>
				</div>
				<div class="bottomBtn fontS26" @click="CreatOrder">选TA服务</div>

			</div>
		</div>

	</view>
</template>

<script>
import {
	findServePersonalDetailApp,
	findServeDetail
} from "@/api/index";
import {
	tutorDetailApi,
} from "@/api/serve";

export default {

	data() {
		return {
			headerHeight: 0, // 用于存储头部高度
			baseUrl: getApp().globalData.baseUrl,
			title: '人法财',
			isShowbar: false,
			isBack: false,
			serviceDetail: null,
			tutorDetail: null,
			loading: false,

			swiperList: [],
			iconList: [],
			custom: null,
			navTop: null,
			serveId: null,
			tutorId: null



		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},
	onShareTimeline() {
		return {
			title: this.shareLine.title,
			// imageUrl: this.shareLine.imageUrl,
		}
	},
	mounted() {

		// 动态获取头部高度
		const query = uni.createSelectorQuery().in(this);
		query.select('.header').boundingClientRect(data => {
			if (data) {
				console.log(data)
				this.headerHeight = data.height;
			}
		}).exec();

	},
	onShareAppMessage(res) {
		console.log(res)

		if (res.from === 'button') {
			return {
				title: this.shareLine.title,
				path: '/pages/index/index',
				// imageUrl: this.weeklyDetailInfo.coverUrl,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		} else {
			return {
				title: this.shareLine.title,
				path: '/pages/index/index',
				// imageUrl: this.houseListInfo.houseCover,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		}
	},

	async onHide() {
	},
	async onLoad(option) {
		console.log(option)
		let custom = wx.getMenuButtonBoundingClientRect()
		this.btnRight = uni.upx2px(30) + custom.width

		getApp().globalData.dynamicObj = null;
		this.custom = custom
		this.navTop = custom.top - this.statusBarHeight
		console.log(custom, this.navTop)
		this.serveId = option.serveId
		await this.getServiceDetail(option.serveId)
		await this.getTutorDetail(option.tutorId)
	},

	async onShow() {




	},

	methods: {
		wxScale() {
			uni.previewImage({
				urls: [
					"https://oss-prod.xtrip.vip/common/20241011102729.png?x-oss-process=image/quality,q_80/format,jpg"
				], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了

			})
		},

		// 个人端详情
		async getServiceDetail(id) {

			const {
				data
			} = await findServePersonalDetailApp(id);
			this.serviceDetail = data

		},
		async getTutorDetail(id) {
			const {
				data
			} = await tutorDetailApi(id, this.serveId);
			this.tutorDetail = data
			this.loading = true

		},

		// 跳转导师
		goTutor() {
			uni.navigateTo({
				url: `/pages/service/tutor?serveId=${this.serviceDetail.serveId}`
			})
		},
		// 跳转支付
		CreatOrder() {
			console.log('跳转支付')
			uni.navigateTo({
				url: `/pages/order/create?serveId=${this.serviceDetail.serveId}&tutorId=${this.tutorDetail.tutorId}`
			})

		}
	},

	onReachBottom() {
	},
	onPullDownRefresh() {
	},
};
</script>

<style lang="less" scoped>
@import url(index.less);

page {
	background-color: #f7f7f7 !important;
}

.content {

	padding-bottom: calc(constant(safe-area-inset-bottom) + 108upx);
	/*兼容 IOS<11.2*/
	padding-bottom: calc(env(safe-area-inset-bottom) + 108upx);
	/*兼容 IOS>11.2*/

}

.avator-bg {
	width: 100%;
	height: 544upx;
}

.tutor-detail {
	margin: 0 20upx;
	background: #FFFFFF;
	border-radius: 16upx;
	padding: 50upx 30upx;
	margin-top: -180upx;
	position: relative;
	z-index: 6;
	min-height: calc(100vh - 520rpx);

	.text-detail {
		font-weight: 400;
		font-size: 28upx;
		color: #373737;
		line-height: 40px;
		text-align: justify;
	}
}
</style>